<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/HanderFooter2.css">
    <link rel="stylesheet" type="text/css" href="css/shopIndex.css">
</head>
<body>
<div style="overflow: hidden">
    <el-container>
        <el-header style="padding: 0;height: auto">
            <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
            <div class="header222" style="overflow:hidden;background-color: white">
                <div style=" width:20%;float: left;overflow:hidden; padding-top: 20px">
                    <img src="./images/logo.png" alt=""
                         style="float: left;margin-left:100px;padding-bottom:15px;width: 120px">
                </div>
                <div id="app" style="float: left ;
                     vertical-align: bottom;
                      width: 30%;
                     padding-left: 20px;">
                    <el-menu :default-active="activeIndex"
                             text-color="#000"
                             mode="horizontal"
                             active-text-color="#ffd04b">
                        <el-menu-item style=" margin-left:80px;font-size: 17px;width: 15%;text-align: center" index="1">
                            商城
                        </el-menu-item>
                        <el-menu-item style=" margin-left:80px;font-size: 17px;width: 15%;text-align: center" index="2">
                            周边
                        </el-menu-item>
                    </el-menu>
                </div>
                <div class="rightMenu" style="float:right;padding-top: 15px;width:25%">
                    <input class="form-control menuipt" placeholder="请输入搜索内容">

                    <div class="right icons soushuo" data-menu="2" style="margin-right: 30px;" style="width: 70%">

                        <img src="./img/seach.png" class="iconimg1" style="width: 70%">
                    </div>
                    <div class="right icons" data-menu="0" onclick="window.location.href='/font/shoppingCart'"
                         style="margin-right: 20px;position: relative;">
                        <div id="cartNum"
                             style="position: absolute;top:-6px;right:-6px;background: red;color: #fff;width:16px;height:16px;display:flex;justify-content:center;align-items:center;font-size: 12px;border-radius: 50%;letter-spacing: 0px">
                            0
                        </div>
                        <img src="./img/shoppingcart.png" class="iconimg1" style="width: 70%">
                    </div>
                    <div class="right icons" data-menu="1">
                        <img src="./img/people.png" class="iconimg1" style="width: 70%">
                    </div>
                </div>
            </div>
        </el-header>

        <el-main style="">
            <div class="wb100 peripherymessage">
                <div class="leftmenu tal">
                    <div class="menu">全部商品</div>
                    <div class="menu">新品上市</div>
                    <div class="menu">登机/托运</div>
                    <div class="menu">材质分类</div>
                    <div class="menu">镇店爆款</div>
                    <div class="menu">明星推荐</div>
                    <div class="menu">联名设计</div>
                    <div class="menu">旅行配件</div>
                </div>
                <div class="wb100_rightMenu " style="border-left: solid 1px #050505">
                    <!-- *********** 时尚系列************************-->
                    <div class="transaction">
                        <div>
                            <div class="left fs26 left_text">Newlife时尚系列</div>
                            <div class=" left fs13 clr left_text">The foundation
                                of any travel uniform,sized to carry onto or check on any flight
                            </div>
<!--                            <div class="left fs26 left_text">{{a.title}}</div>-->
<!--                            <div class=" left fs13 clr left_text">{{a.intro}}-->
<!--                            </div>-->
                            <div class="left fs14 left_text"
                                 style="font-weight: 600;cursor: pointer">SHOP ALL <i class="iconfont icon-you"></i>
                            </div>
                            <div class="clr">
                                <div class="imgProduct " onclick="">
                                    <div style="position:absolute;top:40%;display:none;transform:translateY(-50%);"
                                         class="left leftImg" onclick="ImgIndex(this,2)" >
                                        <img src="./pc/img/left.png"  class=" csp"> </div>

                                    <div onclick="ImgIndex(this,1)"class="rightImg" style="position:absolute;display:block;top:40%;transform:translateY(-50%);right:0 ;">
                                        <img src="./pc/img/right.png" class=" csp"></div>

                                    <div class="imgdetail "><!--//商品滚动展示信息-->
                                        <div class="alldoct">
                                            <!-- 0系列  增加系列"imgpd"尾数+1-->
                                            <div class="imgpd imgpd0" id="imgpd0" v-for="i in imgpd1">
                                                <img :src="i.src" style="width: 80%;">
                                                <div class="imgpd_title" style="font-size:20px;margin-bottom: 3%">
                                                    {{i.title}}
                                                </div>
                                                <div style="font-size:16px;">￥{{i.price}}</div>
                                                <el-button size="mini" style="margin-top: 3%;" round>加入购物车
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
<!--                     *********** 时尚系列************************-->
                    <div class="transaction">
                        <div>
                            <div class="left fs26 left_text">Newlife时尚系列</div>
                            <div class=" left fs13 clr left_text">The foundation
                                of any travel uniform,sized to carry onto or check on any flight
                            </div>
                            <div class="left fs14 left_text"
                                 style="font-weight: 600;cursor: pointer">SHOP ALL <i class="iconfont icon-you"></i>
                            </div>
                            <div class="clr">
                                <div class="imgProduct " onclick="">
                                    <div style="position:absolute;top:40%;display:none;transform:translateY(-50%);"
                                         class="left leftImg" onclick="ImgIndex(this,2)" >
                                        <img src="./pc/img/left.png"  class=" csp"> </div>

                                    <div onclick="ImgIndex(this,1)"class="rightImg" style="position:absolute;display:block;top:40%;transform:translateY(-50%);right:0 ;">
                                        <img src="./pc/img/right.png" class=" csp"></div>

                                    <div class="imgdetail "><!--//商品滚动展示信息-->
                                        <div class="alldoct">
                                            <!-- 0系列  增加系列"imgpd"尾数+1-->
                                            <div class="imgpd imgpd1" id="imgpd1" v-for="i in imgpd2">
                                                <img :src="i.src" style="width: 80%;">
                                                <div class="imgpd_title" style="font-size:20px;margin-bottom: 3%">
                                                    {{i.title}}
                                                </div>
                                                <div style="font-size:16px;">￥{{i.price}}</div>
                                                <el-button size="mini" style="margin-top: 3%;" round>加入购物车
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                    <!-- *********** 时尚系列************************-->
                    <div class="transaction">
                        <div>
                            <div class="left fs26 left_text">Newlife时尚系列</div>
                            <div class=" left fs13 clr left_text">The foundation
                                of any travel uniform,sized to carry onto or check on any flight
                            </div>
                            <div class="left fs14 left_text"
                                 style="font-weight: 600;cursor: pointer">SHOP ALL <i class="iconfont icon-you"></i>
                            </div>
                            <div class="clr">
                                <div class="imgProduct " onclick="">
                                    <div style="position:absolute;top:40%;display:none;transform:translateY(-50%);"
                                         class="left leftImg" onclick="ImgIndex(this,2)" >
                                        <img src="./pc/img/left.png"  class=" csp"> </div>

                                    <div onclick="ImgIndex(this,1)"class="rightImg" style="position:absolute;display:block;top:40%;transform:translateY(-50%);right:0 ;">
                                        <img src="./pc/img/right.png" class=" csp"></div>

                                    <div class="imgdetail "><!--//商品滚动展示信息-->
                                        <div class="alldoct">
                                            <!-- 2系列  增加系列"imgpd"尾数+1-->
                                            <div class="imgpd imgpd2" id="imgpd2" v-for="i in imgpd3">
                                                <img :src="i.src" style="width: 80%;">
                                                <div class="imgpd_title" style="font-size:20px;margin-bottom: 3%">
                                                    {{i.title}}
                                                </div>
                                                <div style="font-size:16px;">￥{{i.price}}</div>
                                                <el-button size="mini" style="margin-top: 3%;" round>加入购物车
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </el-main>
        <el-footer style="height: auto;padding: 0">
            <div class="footModal clr">
                <div class="fmodal">
                    <div style="display: flex">
                        <div class="foot shop-mart">
                            <div class="fs16 fwb line40" style="color:#000">商 城</div>
                            <div class="fs12 fwb  line24" onclick="category(0)">全部商品</div>
                            <div class="fs12 fwb  line24" onclick="category(10037)">新品上市</div>
                            <div class="fs12 fwb  line24" onclick="category(10000)">登机/托运</div>
                            <div class="fs12 fwb  line24" onclick="category(10024)">材质分类</div>
                            <div class="fs12 fwb  line24" onclick="category(10039)">镇店爆款</div>
                            <div class="fs12 fwb  line24" onclick="category(10038)">明星推荐</div>
                            <div class="fs12 fwb  line24" onclick="category(10017)">联名设计</div>
                            <div class="fs12 fwb  line24" onclick="category(10012)">旅行配件</div>
                        </div>
                        <div class="foot">
                            <div class="fs16 fwb line40 hover-item" style="color:#000" onclick="category(10012)">周 边
                            </div>
                            <div class="fs12 fwb line24 hover-item" onclick="category(10014)">收纳系列</div>
                            <div class="fs12 fwb  hover-item" onclick="category(10015)">生活周边</div>
                            <div class="foot-a">
                                <a target="_blank" href="https://weibo.com/level8official"><img src="img/1.png"></a>
                                <a target="_blank" href=" "><img src="img/2.png"></a>
                                <a target="_blank" href="https://www.instagram.com/level8_official/"><img
                                        src="img/3.png"></a>
                                <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img
                                        src="img/4.png"></a>
                            </div>
                        </div>
                    </div>
                    <style>
                        .hover-item {
                            cursor: pointer;
                        }
                    </style>
                    <div class="follow" style="display: flex;flex-direction: column;justify-content: space-between">
                        <div>
                            <div class="followimg">
                                <img src="img/7.png" style="margin-bottom:4px">
                                <div class="fs12 fwb line30h30">关注公众号</div>
                            </div>
                            <div class="followimg" style="margin-right: 40px;">
                                <img src="img/7.jpg" style="margin-bottom:4px">
                                <div class="fs12 fwb line30h30">绑定产品</div>
                            </div>
                        </div>
                        <div class="clr">
                            <input class="form-control-bottom left searchipts" placeholder="搜索关键词">
                            <a href="www.baidu.com">
                                <div class="bg-black left  tac searchimgs"
                                     style="display: flex;align-items: center;justify-content: center">
                                    <img src="img/51.png"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" tar foottext">
                <span class=" foottext1"> ©Copyright Level8 2020 </span>
                <span class=" foottext2"> level8@level8cases.com</span>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
</html>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                visible: false,
                activeIndex: '1',
                activeIndex2: '1',
                arro:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],//动画数组
                arry:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],//动画数组
                input: '',
                pd:[],
                imgpd1:[],
                imgpd2:[],
                imgpd3:[]
                    // [{
                    //     src: "./pc/img/LA-1630白色-b20b03a9-15ed-437c-a0ad-1910cdb945b7.png",
                    //     title: "光影系列行李箱",
                    //     price: "1099"
                    //
                    // },
                    //     {
                    //         src: "./pc/img/LA-1630粉色-22ebab84-736f-4b87-9377-17dca9263653.png",
                    //         title: "光影系列行李箱",
                    //         price: "1099"
                    //
                    //     }, {
                    //     src: "./pc/img/LA-1630白色-b20b03a9-15ed-437c-a0ad-1910cdb945b7.png",
                    //     title: "光影系列行李箱",
                    //     price: "1099"
                    //
                    // }, {
                    //     src: "./pc/img/LA-1630白色-b20b03a9-15ed-437c-a0ad-1910cdb945b7.png",
                    //     title: "光影系列行李箱",
                    //     price: "1099"
                    //
                    // }, {
                    //     src: "./pc/img/LA-1630白色-b20b03a9-15ed-437c-a0ad-1910cdb945b7.png",
                    //     title: "光影系列行李箱",
                    //     price: "1099"
                    //
                    // }]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

        },
        created:function () {
            // let id = location.search.split("=")[1];
            //发请求获取商品详情

            axios.get("/service/selectById?id=1").then(function (response) {
                console.log("行不行啊"+response.data)
                console.log(response.data);
                v.imgpd1 = response.data;
            }),  axios.get("/service/selectById?id=2").then(function (response) {
                console.log("行不行啊"+response.data)
                console.log(response.data);
                v.imgpd2 = response.data;
            }),  axios.get("/service/selectById?id=3").then(function (response) {
                console.log("行不行啊"+response.data)
                console.log(response.data);
                v.imgpd3 = response.data;
            })


            // //发请求获取分类数据
            // axios.get("/category/select").then(function (response) {
            //     v.categoryArr = response.data;
            // })

        }
    })

    var i = 0;//操作对象下标位置
    var rightImg = document.querySelectorAll(".rightImg") //获取右键头的对象
    var leftImg = document.querySelectorAll(".leftImg")//获取左键头的对象
    var alldoct = document.querySelectorAll(".alldoct")//获取整个系列div的对象
    function ImgIndex(t,b) {
        switch (b) {
            case 1: {
                for (i = 0; i < rightImg.length; i++) {//获取下标
                    if (t == rightImg[i]) {
                        break;
                    }
                }
                box = alldoct[i]
                console.log("下标位置:"+i)
                ff(2,i);//运行动画
                break;
            }
            case 2: {
                for (i = 0; i < leftImg.length; i++) {
                    if (t == leftImg[i]) {
                        break;
                    }
                    console.log(i)
                }

                box = alldoct[i]
                ff(1,i);

                break;
            }
        };
    }

    //滑动动画
    var box;//移动的对象
    function ff(a,i) { //参 1右移动  2左移动
        var xx = document.querySelectorAll(".imgpd" + i)//获取系列商品对象
        if (a == 1) {
            v.arro[i] += 28;
            console.log(v.arro[i]+"1号")
            if (v.arro[i] < 0) {
                rightImg[i].style.display = 'block';
            } else {
                leftImg[i].style.display = 'none';
            }
            console.log(i)
        } else if (a == 2) {
            v.arro[i] -= 28;
            console.log(v.arro[i]+"2号")
            if (v.arro[i] > -((xx.length-2)*28)) {
                console.log((xx.length*28)+"2号")
                leftImg[i].style.display = 'block';
            } else {
                rightImg[i].style.display = 'none';
            }
        }
        var intervalID = null, begin = v.arry[i], step = 1, target = v.arro[i];
        // 2.1 清除定时器
        clearInterval(intervalID);
        // 2.2 设置定时器
        intervalID = setInterval(function () {
            // 改变起始值
            if (a == 1) {
                begin += step;
                if (begin >= target) {
                    begin = target;
                    clearInterval(intervalID);
                }
            } else if (a == 2) {
                begin -= step;
                if (begin <= target) {
                    begin = target;
                    clearInterval(intervalID);
                }
            }
            // 改变盒子
            box.style.marginLeft = begin + '%';
            v.arry[i] = begin;

        }, 20);//动画时间
        console.log(v.arro[i]+"1号"+v.arry[i]+"zjjj")

    }

</script>